import React, { Fragment, useRef, useMemo, useEffect } from 'react';
import Success from './Icon/Success';
import Error from './Icon/Error';
import Loading from './Icon/Loading';
import { UpStatus } from '../types';

// 入参
export interface UpLoadProps {
  status: UpStatus
}

function Up(props: UpLoadProps): JSX.Element {
  const { status } = props;

  const upRef = useRef<HTMLDivElement | null>(null); // 下拉刷新盒子容器

  const getLoadDOM = useMemo(() => {
    if (status === 1) {
      return <Fragment key="loading">
        <Loading
          fontSize="inherit"
          color="inherit"
          animation
        />
        <span className="easy-scroll-up-load-text">加载中...</span>
      </Fragment>
    }
    if (status === 2) {
      return <Fragment key="success">
        <Success
          fontSize="inherit"
          animation
        />
        <span className="easy-scroll-up-load-text">加载成功</span>
      </Fragment>
    }
    if (status === 3) {
      return <Fragment key="error">
        <Error
          fontSize="inherit"
          animation
        />
        <span className="easy-scroll-up-load-text">加载失败</span>
      </Fragment>
    }
    if (status === 4) {
      return <Fragment key="no-more">
        <span className="easy-scroll-up-load-text">没有更多了...</span>
      </Fragment>
    }
    return null
  }, [status]);

  useEffect(() => {
    if (upRef.current) {
      if (status === 0) {
        upRef.current.style.visibility = 'hidden';
      } else {
        upRef.current.style.visibility = 'visible';
      }
    }
  }, [status]);

  return (
    <div
      ref={upRef}
      className="easy-scroll-up easy-scroll-hardware"
    >
      {getLoadDOM}
    </div>
  )
}

export default Up
